<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>bootstrap-table</title>
    <link rel="stylesheet" data-th-href="@{css/bootstrap/bootstrap.min.css}">
    <link rel="stylesheet" data-th-href="@{css/bootstrap-table/bootstrap-table.css}">
</head>
<body>
    <form class="form">
        <div class="row">
            <div class="col">
                <div class="input-group">
                    <span class="input-group-append">角色:</span>
                    <div class="form-group">
                        <input type="text" name="roleName" class="form-control">
                    </div>
                </div>
            </div>
            <div class="col"></div>
            <div class="col">
                <button type="button" class="btn btn-success" onclick="refresh()">重置</button>
                <button type="button" class="btn btn-primary" onclick="search()">搜索</button>
            </div>
        </div>
    </form>
    <table id="roleTable" data-th-reversed="true" class="mb-auto text-nowrap"></table>
</body>
<!-- jQuery -->
<script data-th-src="@{/js/jquery-v3.4.1.min.js}"></script>
<!-- popper -->
<script data-th-src="@{js/popper/popper.min.js}"></script>
<!-- bootstrap -->
<script data-th-src="@{js/bootstrap/bootstrap.min.js}"></script>
<!-- bootstrap-table -->
<script data-th-src="@{js/bootstrap-table/bootstrap-table.min.js}"></script>
<script data-th-src="@{js/bootstrap-table/locale/bootstrap-table-zh-CN.js}"></script>
<!-- common.js -->
<script data-th-src="@{js/common.js}"></script>
<script data-th-inline="javascript">
    var ctx = [[@{/}]];

    // $('#roleTable').bootstrapTable({
    //     method: 'get', // 服务器数据的请求方式 get or post
    //     url: ctx + "bootstrap-table/list", // 服务器数据的加载地址
    //     striped: true, //是否显示行间隔色
    //     cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
    //     pagination: true, //是否显示分页（*）
    //     sortable: false, //是否启用排序
    //     sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
    //     pageNumber: 1, //初始化加载第一页，默认第一页
    //     pageSize: 5, //每页的记录行数（*）
    //     pageList: [5, 25, 50, 100], //可供选择的每页的行数（*）
    //     strictSearch: true,
    //     minimumCountColumns: 2, //最少允许的列数
    //     clickToSelect: true, //是否启用点击选中行
    //     uniqueId: "ID", //每一行的唯一标识，一般为主键列
    //     cardView: false,
    //     detailView: false, //是否显示详细视图
    //     smartDisplay: false,
    //     queryParams: function(params) {
    //         return {
    //             pageSize: params.limit,
    //             pageNum: params.offset / params.limit + 1,
    //             roleName: $(".form").find("input[name='roleName']").val().trim(),
    //         };
    //     },
    //     columns: [{
    //         checkbox: true
    //     },{
    //         field: 'roleId',
    //         title: '角色ID'
    //     },{
    //         field: 'roleName',
    //         title: '角色'
    //     }, {
    //         field: 'remark',
    //         title: '描述'
    //     }, {
    //         field: 'createTime',
    //         title: '创建时间'
    //     }, {
    //         field: 'modifyTime',
    //         title: '修改时间'
    //     }]
    // });
        $(function() {
            var settings = {
                url: ctx + "bootstrap-table/list",
                queryParams: function(params) {
                    return {
                        pageSize: params.limit,
                        pageNum: params.offset / params.limit + 1,
                        roleName: $(".form").find("input[name='roleName']").val().trim(),
                    };
                },
                columns: [{
                    checkbox: true
                },
                    {
                        field: 'roleId',
                        title: '角色ID'
                    }, {
                        field: 'roleName',
                        title: '角色'
                    }, {
                        field: 'remark',
                        title: '描述'
                    }, {
                        field: 'createTime',
                        title: '创建时间'
                    }, {
                        field: 'modifyTime',
                        title: '修改时间'
                    }
                ]
            }
            $Kevin.initTable('roleTable', settings);
        });
    // 搜索方法
    function search() {
        $('#roleTable').bootstrapTable('refresh');
    }
    // 重置方法
    function refresh() {
        $(".form")[0].reset();
        search();
    }
</script>
</html>